<template>
    <view class="container">
        <view class="launch pa ba_f">
            <image class="dis_in" mode="aspectFill" :src="goods_info.img"></image>
            <view class="dis_in mar_l">
                <view class="fon_30">{{ goods_info.name }}</view>
                <view class="fon_24 color_9">发起了{{ goods.people }}人团</view>
            </view>
        </view>
        <view class="shop_info pa ba_f">
            <view class="shop_list">
                <view class="dis_in">
                    <image mode="aspectFill" :src="goods.logo"></image>
                </view>
                <view class="dis_in">
                    <view class="fon_30 hydlnr">{{ goods.name }}</view>
                    <view class="color_text">
                        <text class="fon_28">{{ goods.people }}人拼购价</text>
                        <text class="fon_24 mar_l">￥</text>
                        <text class="fon_30 wei">{{ goods.pt_price }}</text>
                    </view>
                    <view>
                        <text class="fon_28 color_9">单买价</text>
                        <text class="fon_28 text_c color_9 mar_l">￥{{ goods.y_price }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="ba_f t_c pa" v-if="sec != null && group == '拼团开始'">
            <text class="fon_28 wei">还差</text>
            <text class="fon_28 wei color_text">{{ sy_num }}人</text>
            <text class="fon_28 wei">拼购成功,</text>
            <text class="fon_28 wei">剩余时间</text>
            <text class="fon_28 wei timeBack" v-for="(item, index) in hour" :key="index">{{ item }}</text>
            <text>:</text>
            <text class="fon_28 wei timeBack" v-for="(item, index) in min" :key="index">{{ item }}</text>
            <text>:</text>
            <text class="fon_28 wei timeBack" v-for="(item, index) in sec" :key="index">{{ item }}</text>
        </view>
        <view class="ba_f t_c pa" v-else>
            <text class="fon_28 wei">拼团已结束</text>
        </view>
        <view class="ba_f t_c launchNum pa">
            <view class="dis_in mar_l" v-for="(item, index) in group_user" :key="index">
                <image mode="aspectFill" :src="item.img"></image>
            </view>
            <view class="dis_in mar_l border_dash" v-for="(item, index) in sy_num" :key="index">
                <image mode="aspectFill" src=""></image>
            </view>
            <block v-if="sy_num > 0">
                <button @tap="buttonFun" class="joinGroup" :openType="button_type" :style="'background:' + color" v-if="sec != null && group == '拼团开始'">
                    {{ button_text }}
                </button>
                <button class="joinGroup" :style="'background:' + color" v-else>拼团已失效</button>
            </block>
            <button class="joinGroup" :style="'background:' + color" v-else>拼团已成功</button>
        </view>
        <view class="playMethod pa_1 ba_f mar_t">
            <view class="pa_0 fon_30 bor_bottom">拼购玩法</view>
            <view class="fon_24 pa_0 rule">
                <view class="dis_in">
                    <image class="dis_in" mode="aspectFill" src="./static/collage/num_one.png" style="width: 30rpx; height: 30rpx; margin-right: 5rpx"></image>
                    <text class="dis_in">开团/参团</text>
                </view>
                <view class="dis_in t_c">></view>
                <view class="dis_in">
                    <image class="dis_in" mode="aspectFill" src="./static/collage/num_two.png" style="width: 30rpx; height: 30rpx; margin-right: 5rpx"></image>
                    <text class="dis_in">邀请好友</text>
                </view>
                <view class="dis_in t_c">></view>
                <view class="dis_in t_c">
                    <view class="dis_in">
                        <image
                            class="dis_in"
                            mode="aspectFill"
                            src="./static/collage/num_three.png"
                            style="width: 30rpx; height: 30rpx; margin-right: 5rpx"
                        ></image>
                    </view>
                    <view class="dis_in">
                        <view>满员发货</view>
                        <view class="color_9">(不满自动退款)</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import cardlist from '@/ymq_canyino2o/dist/cardlist/index';
import gettel from '@/ymq_canyino2o/dist/gettel/index';
var app = getApp();
export default {
    components: {
        cardlist,
        gettel
    },
    data() {
        return {
            group: '拼团开始',
            num: 3,
            button_text: '我要参团',
            sec: '',
            id: '',
            options: '',
            goods_id: '',
            num_peo: '',
            userInfo: '',

            goods: {
                people: '',
                logo: '',
                name: '',
                pt_price: '',
                y_price: ''
            },

            already_group: false,
            already: '',

            goods_info: {
                img: '',
                name: ''
            },

            sy_num: '',
            button: '',
            button_type: '',
            group_user: '',
            hour: '',
            min: '',
            color: ''
        };
    },
    onLoad: function (o) {
        app.globalData.setNavigationBarColor(this);
        console.log('传递过来的参数', o);
        this.setData({
            id: o.id,
            options: o,
            goods_id: o.goods_id,
            num_peo: Number(o.group_num)
        });
    },
    onReady: function () {},
    onShow: function () {
        var that = this;
        app.globalData.getUserInfo(function (o) {
            that.setData({
                userInfo: o
            });
            if ('' == o.img || '' == o.name) {
                uni.navigateTo({
                    url: '/ymq_canyino2o/pages/my/userinfo' // ../smdc/getdl
                });
            } else {
                that.refresh();
            }
        });
    },
    onHide: function () {},
    onUnload: function () {},
    onPullDownRefresh: function () {},
    onReachBottom: function () {},
    onShareAppMessage: function () {
        var o = this.options;
        return {
            title: uni.getStorageSync('users').name + '邀请您一起来拼团',
            path: '/ymq_canyino2o/pages/collage/collageInfo?id=' + o.id + '&user_id=' + o.user_id + '&goods_id=' + o.goods_id,
            success: function (o) {
                console.log(o);
            },
            complete: function (o) {
                console.log('执行');
            }
        };
    },
    onShareTimeline: function () {
        var o = this.options;
        return {
            title: uni.getStorageSync('users').name + '邀请您一起来拼团',
            path: '/ymq_canyino2o/pages/collage/collageInfo?id=' + o.id + '&user_id=' + o.user_id + '&goods_id=' + o.goods_id,
            success: function (o) {
                console.log(o);
            },
            complete: function (o) {
                console.log('执行');
            }
        };
    },
    methods: {
        reload: function (o) {
            var that = this;
            that;
            app.globalData.util.request({
                url: 'entry/wxapp/GoodsInfo',
                cachetime: '0',
                data: {
                    goods_id: that.goods_id
                },
                success: function (o) {
                    for (var t in (console.log('商品的详情', o),
                    that.getCountDown(Number(o.data.goods.end_time)),
                    that.setData({
                        goods: o.data.goods
                    }),
                    o.data.group)) {
                        if (6 <= o.data.group[t].name.length) {
                            o.data.group[t].name = o.data.group[t].name.slice(0, 6) + '...';
                        }
                        if (that.goods_info.user_id == o.data.group[t].user_id) {
                            that.setData({
                                already_group: true,
                                already: o.data.group[t]
                            });
                        }
                    }
                }
            });
        },

        refresh: function (o) {
            var that = this;
            var e = that.id;
            app.globalData.util.request({
                url: 'entry/wxapp/GroupInfo',
                data: {
                    group_id: e
                },
                success: function (o) {
                    console.log('团的详情', o);
                    var t = Number(o.data.kt_num) - Number(o.data.yg_num);
                    that.setData({
                        goods_info: o.data,
                        sy_num: t
                    });
                    that.reload();
                }
            });
            app.globalData.util.request({
                url: 'entry/wxapp/GetGroupUserInfo',
                data: {
                    group_id: e
                },
                success: function (o) {
                    for (var t in (console.log('这是团id', e), console.log('这是参团的人数', o), console.log('这是用户的信息', that.userInfo), o.data)) {
                        console.log(that.userInfo.name);
                        console.log(o.data[t].name);
                        if (that.userInfo.name == o.data[t].name) {
                            that.setData({
                                button_text: '邀请好友参团',
                                button: 'invite',
                                button_type: 'share'
                            });
                            break;
                        }
                        that.setData({
                            button_text: '我要参团',
                            button: 'join_group'
                        });
                    }
                    that.setData({
                        group_user: o.data
                    });
                }
            });
        },

        getCountDown: function (s) {
            var that = this;
            if ('拼团开始' == that.group) {
                setInterval(function () {
                    var o = new Date();
                    var t = new Date(1000 * s).getTime() - o.getTime();
                    var a = Math.floor(t / 1000 / 60 / 60) + '';
                    var e = Math.floor((t / 1000 / 60) % 60) + '';
                    var n = Math.floor((t / 1000) % 60) + '';
                    if (0 < t) {
                        if (a < 10) {
                            a = '0' + a;
                        }
                        if (e < 10) {
                            e = '0' + e;
                        }
                        if (n < 10) {
                            n = '0' + n;
                        }
                        a = a.split('');
                        e = e.split('');
                        n = n.split('');
                        that.setData({
                            hour: a,
                            min: e,
                            sec: n
                        });
                    } else {
                        that.setData({
                            group: '拼团已结束'
                        });
                    }
                }, 1000);
            }
        },

        invite: function (o) {
            this;
        },

        join_group: function (o) {
            var t = this;
            uni.redirectTo({
                url:
                    'qgform?store_id=' + t.goods.store_id + '&goods_id=' + t.goods_id + '&type=2&group_id=' + t.id + '&end_time=' + t.goods.end_time + '&xf_time=' + t.goods.xf_time
            });
        },

        buttonFun() {
            console.log('占位：函数 button 未声明');
        }
    }
};
</script>
<style scoped>
@import './collageInfo.css';
@import './index.css';
</style>
<style lang="scss" scoped>
	.launch {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 20rpx 2.5%;
		box-sizing: border-box;
	}
	.shop_info {
		width: 100%;
		padding: 0 2.5%;
		box-sizing: border-box;
		.shop_list {
			width: 100%;
			display: flex;
		}
	}
</style>
